<template>
  <div class="login">
    <h1>Login</h1>
    <form id="login">

<!--    <img src="./img/defaultImg.jpg" alt="" id="img"> -->
    <p>
    <label for="username">用户名</label><br/>
    <input type="text" id='username' name="username" v-model.lazy='userInfo.username'>
    </p>
    <p>
    <label for="password">密码</label><br/>
    <input type="text" id='password' name="password" v-model.lazy='userInfo.password'>
    </p>
    <input type="button" value="确认登录" id="loginBtn" @click='login()'>
    <p style="text-align: right;">
      <a href="" id="forgetPW">忘记密码</a>
      &nbsp;
      <a href="javasript:void(0)" id="goRegister" @click='$router.push("/register")'>注册</a>
    </p>
    <h3 @click='$router.push("/stuSystem")'>Sam Stu Sys</h3>
  </form>
  </div>
</template>

<script>
import api from '../http/apis/apis.js'
export default {
  data(){
    return {
      userInfo:{
        username:'',
        password:''
      }
    }
  },
  methods:{
    async login(){
      const {data} = await api.userApi.login(this.userInfo);
      if(data.status){
        alert(data.message);
        console.log(data);
        localStorage.token = data.token;
        this.$router.push('/stuSystem');
      }else{
        alert(data.message);
      }
    }
  }
}
</script>

<style src="@/assets/login.css" scope></style>
<style scoped>

</style>
